<template>
<div>
    <div class="title">
        <p class="renyuan">角色管理</p>
        <Modal v-model="modal1" title="新增角色"  :loading="loading" @on-ok="asyncOK" width="570" :styles="{top:'150px'}">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
                <Form-item class="sost1" prop="roleName">
                    <p class="tit">角色名称：</p>
                    <Input v-model="formValidate.roleName"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="roleType">
                    <p class="tit">角色类型：</p>
                    <Select v-model="formValidate.roleType" clearable class="selc" style="width:240px;font-size: 14px" placeholder="未选择">
                        <Option v-for="item in roleTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item class="sost1" prop="roleClaasify">
                    <p class="tit">角色所属：</p>
                    <Select v-model="formValidate.roleClaasify" clearable class="selc" style="width:240px;font-size: 14px" placeholder="未选择">
                        <Option v-for="item in roleClaasifyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item class="sost1" prop="roleDepartment">
                    <p class="tit">所属部门：</p>
                    <Input v-model="formValidate.roleDepartment"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="status">
                    <p class="jues1" style="float: left;">是否有效：</p>
                    <Radio-group  v-model="formValidate.status" type="button">    
                        <Radio class="ridou" label="1">
                            <span>是</span>
                        </Radio>
                        <Radio class="ridou" label="0">
                            <span>否</span>
                        </Radio>
                    </Radio-group>
                </Form-item>
                <Form-item  class="sost2"  style="margin-bottom:0px;">    
                    <p class="jues1">配置菜单：</p>
                    <div class="tabb">
                        <span class="tabc">菜单</span>
                        <span class="tabc">分配</span>
                        <span class="tabc">操作</span>
                    </div>
                    <Form-item class="tabb1" >
                        <Form-item style="width:500px;padding-top: 10px;" prop="">
                            <span class="tabd">流程审批</span>
                            <Checkbox-group v-model="formValidate.menu" style="display:inlin-block">
                                <Checkbox label="1001" style="color:white;padding-right: 114px;"></Checkbox>
                                <Checkbox label="1002" style="color:white;"></Checkbox>
                            </Checkbox-group>
                        </Form-item>
                    </Form-item>
                    <Form-item class="tabb2" >
                        <Form-item style="width:500px;padding-top: 10px;" prop="">
                            <span class="tabd">客户管理</span>
                            <Checkbox-group v-model="formValidate.menu" style="display:inlin-block">
                                <Checkbox label="1003" style="color:white;padding-right: 114px;"></Checkbox>
                                <Checkbox label="1004" style="color:white;"></Checkbox>
                            </Checkbox-group>
                        </Form-item>
                    </Form-item>
                </Form-item>
            </Form>
            <div slot="footer" style="text-align: center;margin:17px 0px 0px 0px;">
                <Button id="serch1"  @click="handleSubmit_js('formValidate')" type="primary">保存</Button>
            </div>
        </Modal>
    </div>
    <div style="height: 48px;margin-top: 5px;">
        <div style="width: 280px;float: left;">
            <p class="jues" style="float:left">角色类型：</p>
            <Radio-group style="margin-left: 10px;margin-top: 15px;" v-model="model8.radio1" type="button">    
                <Radio class="ridou" label="业务角色">
                    <span>业务角色</span>
                </Radio>
                <Radio class="ridou" label="管理员">
                    <span>管理员</span>
                </Radio>
            </Radio-group>
        </div>
        <div style="float: left;width: 360px;">
            <p class="jues" style="float:left">角色所属：</p>
            <Radio-group style="margin-left: 10px;margin-top: 15px;" v-model="model8.radio2" type="button">    
                <Radio class="ridou" label="PC角色">
                    <span>PC角色</span>
                </Radio>
                <Radio class="ridou" label="App角色">
                    <span>App角色</span>
                </Radio>
            </Radio-group>
        </div>
        <div style="float: left;width: 230px;">
            <p class="jues" style="float:left">是否有效：</p>
            <Radio-group style="margin-left: 10px;margin-top: 15px;" v-model="model8.radio3" type="button">    
                <Radio class="ridou" label="1">
                    <span>是</span>
                </Radio>
                <Radio class="ridou" label="0">
                    <span>否</span>
                </Radio>
            </Radio-group>
        </div>
    </div>
    <div class="sosuo6">
         <div class="sost5">
            <p class="tit1">所属部门：</p>
            <Select v-model="model8.serch" clearable class="selc" style="width:280px;font-size: 14px" placeholder="未选择">
                <Option v-for="item in roleClaasifyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </div>
        <div class="sost5">
            <p class="tit1">关键信息：</p>
            <Input  size="large" placeholder="未编辑" style="width:280px;font-size: 14px;position: relative;top: 0px;" v-model="model8.text" ><Button slot="append" icon="ios-search" @click="change"></Button></Input>
        </div>
        <Button  @click="handleReset_6" class="congz" type="primary" style="font-size: 14px;">重置</Button>
    </div>
    <div class="tab">
        <Button class="xinz" @click="newadd('formValidate')" type="primary" style="font-size: 18px;">新增</Button>
        <Table stripe :columns="columns7" :data="list"></Table>
    </div>
    <div class="pag">
        <Page :total="500" ></Page>
    </div>
    
</div>   
</template>
<script>
    import Base from '../common/Base.js'
    export default {
        mixins:[Base],
        data () {
            return {
                click:false,
                loading: true,
                module:'users',
                model8:{
                    serch:"",
                    text:"",
                    radio1:"业务角色",
                    radio2:"PC角色",
                    radio3:"1"
                },
                formValidate: {
                    roleId:'',
                    tenantId: '2',
                    roleName: '',
                    roleClaasify:'',
                    roleDepartment: '',
                    roleType: '',
                    status: '1',
                    createUser: 'hc',
                    menuList:[],
                    menu:[]
                },
                ruleValidate: {
                    roleName: [
                        { required: true, message: '角色名称不能为空', trigger: 'blur' }
                    ],
                    roleType: [
                        { required: true, message: '请选择角色类型', trigger: 'change' }
                    ],
                    roleDepartment: [
                        { required: true, message: '所属部门不能为空', trigger: 'blur' },
                    ],
                    status: [
                        { required: true, message: '请选是否有效', trigger: 'change' }
                    ],
                    roleClaasify: [
                        { required: true, message: '请选择角色所属', trigger: 'change' }
                    ]
                },
                roleClaasifyList: [
                    {
                        value: '管理者',
                        label: '系统角色'
                    },
                    {
                        value: '管理者',
                        label: '管理者'
                    }
                ],
                roleTypeList: [
                    {
                        value: 'PC角色',
                        label: 'PC角色'
                    },
                    {
                        value: 'App角色',
                        label: 'App角色'
                    }
                ],
                columns7: [
                    {
                        title: '序号',
                        width: 100,
                        key: 'id'
                    },
                    {
                        title: '角色名称',
                        width: 120,
                        key: 'roleName'
                    },
                    {
                        title: '所属部门',
                        width: 140,
                        key: 'roleDepartment'
                    },
                    {
                        title: '角色分类',
                        width: 127,
                        key: 'roleClaasify'
                    },
                    {
                        title: '角色类型',
                        width: 150,
                        key: 'roleType'
                    },
                    {
                        title: '是否有效',
                        width: 100,
                        key: 'status1'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/xiugai.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shixiao.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.lapse_js(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shanchu.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove_js(params.index)
                                        }
                                    }
                                }, '')
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
            asyncOK () {
                setTimeout(() => {
                    this.modal1 = false;
                }, 1000);
            },
            change(){
            },
            newadd(name){
                this.modal1 = true;
                this.$refs[name].resetFields();
                Object.assign(this.$data.formValidate, this.$options.data().formValidate);
            },
            handleReset_6() {
                this. model8={
                    serch:"",
                    text:"",
                    radio1:"业务角色",
                    radio2:"PC角色",
                    radio3:"1"
                };
            },
            lapse_js(index) {
                var _this = this;
                var dataObj = Object.assign({}, _this.list[index]);
                dataObj.status="0";
                console.log(dataObj)
                this.$Modal.confirm({
                    title: '失效操作',
                    content: '<p>确认失效？</p>',
                    onOk: () => {
                        var meun_text='';
                        _this.formValidate=dataObj;
                        _this.formValidate.menuList=[];
                        if(_this.formValidate.menu){
                            for(let i=0;i< _this.formValidate.menu.length;i++){
                                meun_text='{"menuId": '+_this.formValidate.menu[i]+'}';
                                _this.formValidate.menuList.push(JSON.parse(meun_text));
                            }
                        }
                        console.log(_this.formValidate)
                        let deleteUrl = `${_this.dmoreurl}/saRole/saRoleUpdate`;
                        _this.$http.post(deleteUrl,dataObj)
                            .then(response => {
                                _this.getData_js()
                                this.$Message.info('该数据已失效');
                            })
                    },
                    onCancel: () => {
                        this.$Message.info('取消数据失效');
                    }
                });
                    
            },
            remove_js(index) {
                var _this = this;
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除数据</p>',
                    onOk: () => {
                        let deleteUrl = `${_this.dmoreurl}/saRole/saRoleDel`;
                        _this.$http.post(deleteUrl,{roleId:_this.list[index].roleId})
                            .then(response => {
                                _this.getData_js()
                                this.$Message.info('成功删除数据');
                            })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除数据');
                    }
                });

            },
            getData_js() {//分页查询暂定
                var _this = this;
                _this.filter.tenantId='2';
                _this.$http.post(`${_this.dmoreurl}/saRole/saRoleQueryList`,_this.filter)
                    .then(function(response) {
                        console.log(response)
                         _this.list = response.data.data;
                        //_this.filter.total = response.data.total;
                        let length_yr=_this.list.length;
                        for( let i=0;i<length_yr;i++){
                            _this.$http.post(`${_this.dmoreurl}/saRole/saRoleQuery`,{roleId:_this.list[i]['roleId']})
                                .then(function(response) {  
                                    _this.list[i].menu=response.data.data.menuList;
                                });
                            _this.list[i]['id']=i+1;
                            if(_this.list[i]['status']=='1'){
                                _this.list[i]['status1']='是';
                            }else{
                                _this.list[i]['status1']='否';
                            }
                        }
                    });
                
            },
            handleSubmit_js(name) {
                var _this = this;
                var meun_text='';
                _this.formValidate.menuList=[];
                console.log(_this.formValidate.menu)
                if(_this.formValidate.menu){
                    for(let i=0;i< _this.formValidate.menu.length;i++){
                        meun_text='{"menuId": '+_this.formValidate.menu[i]+'}';
                        _this.formValidate.menuList.push(JSON.parse(meun_text));
                    }
                }
                console.log(_this.formValidate)
                var submitUrl, submitMethods;
                if (_this.formValidate.roleId != '') {
                    submitUrl = `${_this.dmoreurl}/saRole/saRoleUpdate`;
                    submitMethods = 'POST';
                    console.log('updata')
                } else {
                    submitUrl = `${_this.dmoreurl}/saRole/saRoleAdd`;
                    submitMethods = 'POST'
                    console.log('new')
                }
                _this.$refs[name].validate((valid) => {
                    if (valid) {
                        console.log(_this.formValidate)
                        _this.$http({
                                url: submitUrl,
                                method: submitMethods,
                                data: _this.formValidate
                            })
                            .then(function(response) {
                                if(response.data){
                                _this.$Message.success('提交成功!');
                                _this.modal1 = false;
                                _this.getData_js();
                                Object.assign(_this.$data.formValidate, _this.$options.data().formValidate); // 让我们的数据恢复到初始化状态 
                                }else{
                                    _this.$Message.success('用户名重复！    请修改！');
                                }  
                            }).catch((error) => {
                                if (error) {
                                    this.$Message.info(error.response.msg);
                                }
                            });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            }
        },
        created() {
            this.getData_js();
        }
    }
</script>
<style lang="scss" >
    
</style>